<template>
  <div>
    <Head title="活动信息" isBack>
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm"
          :detail="data.detailData"
          :labelWidth="80"
          align="left"
        ></Detail>
      </template>
    </Head>
    <Head title="活动奖励">
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm1"
          :detail="data.detailData"
          :labelWidth="80"
          align="left"
        ></Detail>
      </template>
    </Head>
    <div class="edit-wrap">
      <Head title="已参与用户">
        <template #content>
          <Table
            ref="tableRef"
            :url="URL_PAGINGACTIVITYRECORD"
            :columns="data.columns"
            :toolbar="data.toolbar"
            :query="data.query"
            :params="{ activityId: id, type: 1 }"
          ></Table>
        </template>
      </Head>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import Table from '@/components/table/index.vue';
import {
  getUserActivityById,
  URL_PAGINGACTIVITYRECORD,
  EXPORT_ACTIVITYRECORD,
} from '@/service/apis/market';
import { exportFile } from '@/utils/utils';

const route = useRoute();
const {
  query: { id },
} = route;

const tableRef = ref();

const detailForm: any = reactive([
  {
    label: '活动名称',
    prop: 'name',
  },
  {
    label: '活动日期',
    prop: 'startTime',
    template: (row: any, index: number) => {
      if (row.startTime && row.endTime) {
        return `${row.startTime}~${row.endTime}`;
      }
      return '--';
    },
  },
  {
    label: '活动说明',
    prop: 'introduce',
    comName: 'textarea',
  },
]);

const detailForm1: any = reactive([]);

const data = reactive({
  detailData: [] as any,
  columns: [
    {
      prop: 'orgName',
      label: '归属企业',
    },
    {
      prop: 'userNumber',
      label: '用户账号',
    },
    {
      prop: 'userName',
      label: '用户姓名',
    },
    {
      prop: 'mobile',
      label: '手机号',
    },
    {
      prop: 'createTime',
      label: '注册时间',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'registerActivityList.export',
      icon: 'icon-export',
      type: 'primary',
      handle: (row: any) => {
        console.log('导出---', row);
        exportFile(
          EXPORT_ACTIVITYRECORD,
          '注册活动参与用户',
          tableRef.value?.getForm()
        );
      },
    },
  ],
  query: [
    {
      label: '归属企业',
      prop: 'orgName',
      comName: 'input',
      props: {
        placeholder: '请输入归属企业',
      },
    },
    {
      label: '用户账号',
      prop: 'userNumber',
      comName: 'input',
      props: {
        placeholder: '请输入用户账号',
      },
    },
    {
      label: '手机号',
      prop: 'mobile',
      comName: 'input',
      props: {
        placeholder: '请输入手机号',
      },
    },
    {
      label: '注册时间',
      prop: 'time',
      comName: 'date',
      keys: ['startTime', 'endTime'],
      props: {
        type: 'daterange',
      },
    },
  ],
});

getUserActivityById(id).then((res: any) => {
  data.detailData = res;

  if (res.detailMap && res.detailMap[0]?.length > 0) {
    res.detailMap[0].forEach((item: any, index: number) => {
      const obj = {
        label: `优惠券${index + 1}`,
        prop: 'name',
        template: (row: any, inx: number) => {
          return `${item.couponName} ${item.couponCount}张`;
        },
      };
      detailForm1.push(obj);
    });
  }
});
</script>